<template>
	<view class="conten">
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="hi" style="font-size: 60rpx;">Hi~</view>
		<view class="welcome" style="font-size: 42rpx;">欢迎来到复盘APP</view>
		<scroll-view scroll-x class="bg-Midnight-Blue nav text-center">
			<view class="cu-item" style="font-size:36rpx;" :class="index == TabCur ?'text-cyan cur':'text-white'"
				@click="video_info(item)" v-for="(item,index) in navigation" :key="index" @tap="tabSelect"
				:data-id="index">
				{{item}}
			</view>
		</scroll-view>
		<view style="width: 85%;margin: auto;" v-if="album_labels == 2">
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">手机号</view>
			<view
				style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input type="text" v-model="phone" placeholder="请输入手机号" style="color: #fff;" />
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="width: 6rpx;height: 50rpx;background-color: #F0F0F0;"></view>
					<view style="margin: 0 15rpx 0 30rpx;color: #F0F0F0;" @click="obtaincode">{{buttonText}}</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">验证码</view>
			<view
				style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input v-model="code" type="text" placeholder="请输入验证码" style="color: #fff;" />
					</view>
				</view>
				<view style="margin-right: 50rpx;" @click="empty">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/xxx.png"></image>
				</view>
			</view>
		</view>

		<view style="width: 85%;margin: auto;" v-if="album_labels == 1">
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">账号</view>
			<view style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;">
				<view class="sjh">
					<input type="text" v-model="username" placeholder="请输入账号" style="color: #fff;" />
				</view>
			</view>
			<view style="margin-top: 20rpx;color: #fff;font-size: 35rpx;">密码</view>
			<view
				style="width: 100%;border-bottom: 4rpx #708AB2 solid;height: 80rpx;display: flex;justify-content: space-between;align-items: center;">
				<view>
					<view class="sjh">
						<input v-model="password" type="password" placeholder="请输入密码" style="color: #fff;"
							v-if="pwtype == 1" />
						<input v-model="password" type="text" placeholder="请输入密码" style="color: #fff;"
							v-if="pwtype == 2" />
					</view>
				</view>
				<view style="margin-right: 50rpx;">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/bukan.png" @click="hide1"
						v-if="pwtype == 1"></image>
					<image style="width: 50rpx;height: 50rpx;" src="../../static/kan.png" @click="hide2"
						v-if="pwtype == 2"></image>
				</view>
			</view>
		</view>

		<!-- <view style="width: 85%;height: 100rpx;display: flex;justify-content: space-between;align-items: center;margin: 30rpx auto;">
			<view style="color: #fff;font-size: 38rpx;display: flex;">
				<view style="padding-right: 30rpx;">
					<checkbox class="blue" value="A"></checkbox>
				</view>
				<view>记住我</view>
			</view>
			<view style="color: #fff;font-size: 38rpx;">忘记密码?</view>
		</view> -->

		<view class="login_box_content_jz">
			<view style="display: flex;margin: 20px 0 0 30px;">
				<view class="fui-align__center">
					<fui-checkbox v-model="checkboxValue" :checked="checkboxValue === '1'" @change="change"></fui-checkbox>
					<text class="fui-text" style="color: #ffffff;width: 200rpx;">我已阅读并同意</text>
				</view>
				<view style="color: #fff;"><span style="color: #2080f7;" @click="serviceagreement">《服务协议》</span></view>
			</view>
		</view>

		<view v-if="album_labels == 2" @click="logincode"
			style="width: 85%;height: 100rpx;background-color: #fff;color: #0D4283;margin: 60rpx auto;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;">
			登录</view>
		<view v-if="album_labels == 1" @click="login"
			style="width: 85%;height: 100rpx;background-color: #fff;color: #0D4283;margin: 60rpx auto;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 50rpx;">
			登录</view>
		<!-- <view style="width: 85%;height: 100rpx;color: #fff;margin: 10rpx auto;text-align: center;line-height: 120rpx;font-size: 50rpx;" @click="register">注册</view> -->
	</view>
</template>

<script>
	import user from '@/api/user.js';
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				navigation: ['密码登录/注册', '验证码登录'],
				album_labels: 1,
				code: '',
				pwtype: 1,
				username: '',
				password: '',
				buttonText: '获取验证码',
				countdown: 60,
				countdownInterval: null,
				phone: '',
				checkboxValue: '2',
				id: undefined,
				category_type: undefined,
			}
		},
		onLoad(query) {
			this.id = query.id;
			this.category_type = query.category_type;
			console.log(this.category_type,111,this.id)
		},
		onShow() {
			let agreement_type = uni.getStorageSync('is_agreement');
			let albumLabels = uni.getStorageSync('albumLabels');
			let tabCur = uni.getStorageSync('tabCur');
			let phone = uni.getStorageSync('phone');
			let code = uni.getStorageSync('code');
			let username = uni.getStorageSync('username');
			let password = uni.getStorageSync('password');

			if (agreement_type == 1) {
				this.checkboxValue = '1'
			}
			if (albumLabels == '') {
				this.album_labels = 1
			} else {
				this.album_labels = albumLabels
			}
			this.TabCur = tabCur
			this.username = username
			this.password = password
			this.phone = phone
			this.code = code
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.album_labels = e.currentTarget.dataset.id + 1
			},
			video_info(val) {
				if (val == '验证码登录') {
					this.album_labels = 1
				} else if (val == '密码登录') {
					this.album_labels = 2
				}
			},
			empty() {
				this.code = ''
			},
			hide1() {
				this.pwtype = 2
			},
			hide2() {
				this.pwtype = 1
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			change(e) {
				if (e.checked) {
					this.checkboxValue = '1'
				} else {
					this.checkboxValue = '2'
				}
			},
			serviceagreement() {
				uni.navigateTo({
					url: '/pages/login/agreement?album_labels=' + this.album_labels + '&TabCur=' + this.TabCur +
						'&phone=' + this.phone + '&code=' + this.code + '&username=' + this.username +
						'&password=' + this.password
				})
			},
			login() {
				if (this.checkboxValue == '2') {
					uni.showToast({
						title: '请阅读同意协议后进行登录操作',
						icon: 'none'
					})
					return
				}
				// #ifdef APP||H5
				user.login({
					account: this.username,
					password: this.password,
					code: ''
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo.token);
						if(this.id === undefined || this.category_type === undefined){
							uni.navigateTo({
								url: '/pages/index/index',
							})
						}else{
							const url = '/pages/bondmarket/postinfo?id=' + this.id
							uni.navigateTo({
								url: url,
							})
						}
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.login({
					success: (res) => {
						if (res.code) {
							user.login({
								account: this.username,
								password: this.password,
								code: res.code
							}).then(res => {
								if (res.code == 1) {
									uni.setStorageSync('token', res.data.userinfo.token);
									if(this.id === undefined || this.category_type === undefined){
										uni.navigateTo({
											url: '/pages/index/index',
										})
									}else{
										const url = '/pages/bondmarket/postinfo?id=' + this.id
										uni.navigateTo({
											url: url,
										})
									}
								}
							});
						} else {
							console.error('获取用户登录凭证失败：', res.errMsg);
						}
					},
					fail: (err) => {
						console.error('uni.login调用失败：', err);
					}
				});
				// #endif
			},
			logincode() {
				if (this.checkboxValue == '2') {
					uni.showToast({
						title: '先勾选协议!',
						icon: 'none'
					})
					return
				}
				// #ifdef APP||H5
				user.mobilelogin({
					mobile: this.phone,
					captcha: this.code,
					code: ''
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo.token);
						if (res.data.userinfo.is_perfect == '0') {
							if (res.data.is_required_userinfo == 1) {
								uni.navigateTo({
									url: '/pages/login/perfect'
								})
							} else {
								if(this.id === undefined || this.category_type === undefined){
									uni.navigateTo({
										url: '/pages/index/index',
									})
								}else{
									const url = '/pages/bondmarket/postinfo?id=' + this.id
									uni.navigateTo({
										url: url,
									})
								}
							}
						} else {
							if(this.id === undefined || this.category_type === undefined){
								uni.navigateTo({
									url: '/pages/index/index',
								})
							}else{
								const url = '/pages/bondmarket/postinfo?id=' + this.id
								uni.navigateTo({
									url: url,
								})
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.login({
					success: (res) => {
						if (res.code) {
							user.mobilelogin({
								mobile: this.phone,
								captcha: this.code,
								// code: res.code
								code: ''
							}).then(res => {
								if (res.code == 1) {
									uni.setStorageSync('token', res.data.userinfo.token);
									if (res.data.userinfo.is_perfect == '0') {
										if (res.data.is_required_userinfo == 1) {
											uni.navigateTo({
												url: '/pages/login/perfect'
											})
										} else {
											if(this.id === undefined || this.category_type === undefined){
												uni.navigateTo({
													url: '/pages/index/index',
												})
											}else{
												const url = '/pages/bondmarket/postinfo?id=' + this.id
												uni.navigateTo({
													url: url,
												})
											}
										}
									} else {
										if(this.id === undefined || this.category_type === undefined){
											uni.navigateTo({
												url: '/pages/index/index',
											})
										}else{
											const url = '/pages/bondmarket/postinfo?id=' + this.id
											uni.navigateTo({
												url: url,
											})
										}
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else {
							console.error('获取用户登录凭证失败：', res.errMsg);
						}
					},
					fail: (err) => {
						console.error('uni.login调用失败：', err);
					}
				});
				// #endif
			},
			obtaincode() {
				if (this.countdownInterval) {
					return;
				}
				console.log(this.phone)
				const reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确!',
						icon: 'none'
					})
					return
				}
				user.send({
					mobile: this.phone,
					event: 'mobilelogin',
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
					}
				});
				this.buttonText = `${this.countdown} S`;
				this.countdownInterval = setInterval(() => {
					this.countdown--;
					this.buttonText = `${this.countdown} S`;
					if (this.countdown <= 0) {
						clearInterval(this.countdownInterval);
						this.countdownInterval = null;
						this.buttonText = '获取验证码';
						this.countdown = 60; // 重置倒计时
					}
				}, 1000);
			},
		}
	}
</script>

<style>
	.conten {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #1C386E, #4683CF);
	}

	.hi {
		width: 85%;
		margin: 0 auto 20rpx;
		color: #fff;
	}

	.welcome {
		width: 85%;
		margin: 0 auto 80rpx;
		color: #fff;
	}
</style>